﻿
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <script src="/js/header.js"></script>
    <title>秒付宝-年报表</title>
    <script src="/lib/date/wdatepicker.js"></script>
    <link href="/lib/sumoselect/sumoselect.css" rel="stylesheet" />
    <script type="text/javascript" src="/lib/highcharts/highcharts.js"></script>
    <script type="text/javascript" src="/lib/sumoselect/jquery.sumoselect.js"></script>
</head>
<body>
    <div class="data-wrap case">
        <div class="data-tool clearfix">
            <div class="pull-left form-inline ">
                <div class="input-sm">最后更新时间：<label id="lastUpdateDate" style="font-weight:bold;"></label></div>
            </div>
            <div class="pull-right">
                <form class="form-inline" id="formSearch" onsubmit="return false;">
                    <div class="input-group input-group-sm">
                        <label class="input-group-addon m5_l">公司名称：</label>
                        <select multiple="multiple" class="search-box-sel-all" name="companyName" id="sltCompanyIds" style="height: 31px;padding: 3px 12px;width:150px;">
                            <option value="">请选择</option>
                        </select>
                    </div>
                    <div class="input-group input-group-sm">
                        <label class="input-group-addon">年份：</label>
                        <input id="d421" class="Wdate wd100" name="startTime" type="text"onfocus="WdatePicker({dateFmt:'yyyy',minDate:'2017',maxDate:'%y-%M-%d'})" autocomplete="off" />
                    </div>
                    <div class="input-group input-group-sm">
                        <label class="input-group-addon m5_l">类型：</label>
                        <select class="form-control fs16" name="reportType">
                            <option value="1">收款</option>
                            <option value="2">付款</option>
                        </select>
                    </div>
                    <button type="button" class="btn btn-default btn-sm active" id="btnSearch"><span class="glyphicon glyphicon-search"></span> 搜索</button>
                </form>
            </div>
        </div>
        <div class="paging"  style="height: 750px; margin: 0 auto">
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            var dt = new Date();

            $("input[name='startTime']").val(dt.getFullYear());

            searchByCompanyId();

            doSearch();
            $("body").keydown(function (event) {
                if (event.keyCode == "13") {
                    doSearch();
                }
            });
            $("#btnSearch").click(function () {
                FlashPay.UI.DoSearch();
            });

            FlashPay.Util.Ajax({
                type: "POST",
                url: "/Report/GetLastUpdateDate/",
                data: null,
                success: function (response) {
                    if (response.success) {
                        $("label#lastUpdateDate").html(response.data);
                    }
                }
            });
        });

        function doSearch() {
            var cover = FlashPay.UI.Mask({
                obj: $("body"),
                opacity: 0.5
            });

            var dataForm = {};
            var ids = "";
            $("#sltCompanyIds option:selected").each(function () {
                ids += $(this).val() + ",";
            });

            dataForm.CompanyIds = ids.split(",");
            dataForm.ReportType = $("select[name='reportType']").val();
            dataForm.StartTime = $("input[name='startTime']").val();

            FlashPay.Util.Ajax({
                type: "POST",
                url: "/Report/GetReportByYear/",
                data: dataForm,
                success: function (res) {
                    if (res.success) {
                        var title = res.data.title;
                        var categories = res.data.xAxis.categories;
                        var series = res.data.series;

                        var yAxis = res.data.yAxis;
                        var interval =yAxis.interval;

                        //柱形
                        $('.paging').highcharts({
                            chart: {
                                type: 'column'
                            },
                            title: {
                                text: title
                            },
                            xAxis: {
                                categories: categories
                            },
                            yAxis: {
                                title: {
                                    text: ""
                                },
                                min: 0,
                                interval: interval,
                                tickInterval: interval,
                                max: interval * 10,
                                lineWidth: 1,
                                lineColor: '#c0c0c0',
                                labels: {
                                    formatter: function () {
                                        if (this.value == 0) return 0;
                                        if (this.value / interval == 10) {
                                            return (this.value / interval / 10) + yAxis.nextUnit;
                                        } else {
                                            return (this.value/interval) + yAxis.unit;
                                        }
                                    }
                                }
                            },
                            tooltip: {
                                crosshairs: true,
                                shared: true
                            },
                            series: series
                        });
                        cover.Remove();
                    } else {
                        cover.Remove();
                        FlashPay.UI.Tip_warning(res.errorMessage == null ? "无数据！" : res.errorMessage);
                        $('.paging').highcharts().destroy();
                        return;
                    }
                }
            });
        }

        function searchByCompanyId() {
            var companyName = $("select[name='companyName']");
            FlashPay.Util.Ajax({
                type: "POST",
                url: "/Role/GetCompany/",
                data: null,
                success: function (response) {
                    if (response.success) {
                        companyName.empty();
                        if (response.data != null) {
                            $.each(response.data, function (i, item) {
                                companyName.append("<option value='" + item.companyID + "'>" + item.companyName + "</option >");
                            });
                            $("select[name='companyName']").SumoSelect({ okCancelInMulti: true, selectAll: true });
                        }
                    }
                }
            });
        }
    </script>
</body>
</html>